<div class="cd-col-form">
  <form name="nfsForm"
        #formDir="ngForm"
        [formGroup]="nfsForm"
        novalidate>
    <div class="card">
      <div i18n="form title|Example: Create Pool@@formTitle"
           class="card-header">{{ action | titlecase }} {{ resource | upperFirst }}</div>

      <div class="card-body">
        <!-- cluster_id -->
        <div class="form-group row"
             *ngIf="!isDefaultCluster">
          <label class="cd-col-form-label required"
                 for="cluster_id"
                 i18n>Cluster</label>
          <div class="cd-col-form-input">
            <select class="form-control custom-select"
                    formControlName="cluster_id"
                    name="cluster_id"
                    id="cluster_id"
                    (change)="onClusterChange()">
              <option *ngIf="allClusters === null"
                      value=""
                      i18n>Loading...</option>
              <option *ngIf="allClusters !== null && allClusters.length === 0"
                      value=""
                      i18n>-- No cluster available --</option>
              <option *ngIf="allClusters !== null && allClusters.length > 0"
                      value=""
                      i18n>-- Select the cluster --</option>
              <option *ngFor="let cluster of allClusters"
                      [value]="cluster">{{ cluster }}</option>
            </select>
            <span class="invalid-feedback"
                  *ngIf="nfsForm.showError('cluster_id', formDir, 'required')"
                  i18n>Required field</span>
          </div>
        </div>

        <!-- daemons -->
        <div class="form-group row">
          <label class="cd-col-form-label"
                 for="daemons">
            <ng-container i18n>Daemons</ng-container>
          </label>
          <div class="cd-col-form-input">
            <ng-container *ngFor="let daemon of nfsForm.getValue('daemons'); let i = index">
              <div class="input-group cd-mb">
                <input class="cd-form-control"
                       type="text"
                       [value]="daemon"
                       disabled />
                <span class="input-group-append">
                  <button class="btn btn-light"
                          type="button"
                          (click)="removeDaemon(i, daemon)">
                    <i [ngClass]="[icons.destroy]"
                       aria-hidden="true"></i>
                  </button>
                </span>
              </div>
            </ng-container>

            <div class="row">
              <div class="col-md-12">
                <cd-select [data]="nfsForm.get('daemons').value"
                           [options]="daemonsSelections"
                           [messages]="daemonsMessages"
                           (selection)="onDaemonSelection()"
                           elemClass="btn btn-light float-right">
                  <i [ngClass]="[icons.add]"></i>
                  <ng-container i18n>Add daemon</ng-container>
                </cd-select>
              </div>
            </div>
          </div>
        </div>

        <!-- FSAL -->
        <div formGroupName="fsal">
          <!-- Name -->
          <div class="form-group row">
            <label class="cd-col-form-label required"
                   for="name"
                   i18n>Storage Backend</label>
            <div class="cd-col-form-input">
              <select class="form-control custom-select"
                      formControlName="name"
                      name="name"
                      id="name"
                      (change)="fsalChangeHandler()">
                <option *ngIf="allFsals === null"
                        value=""
                        i18n>Loading...</option>
                <option *ngIf="allFsals !== null && allFsals.length === 0"
                        value=""
                        i18n>-- No data pools available --</option>
                <option *ngIf="allFsals !== null && allFsals.length > 0"
                        value=""
                        i18n>-- Select the storage backend --</option>
                <option *ngFor="let fsal of allFsals"
                        [value]="fsal.value">{{ fsal.descr }}</option>
              </select>
              <span class="invalid-feedback"
                    *ngIf="nfsForm.showError('name', formDir, 'required')"
                    i18n>Required field</span>
            </div>
          </div>

          <!-- RGW user -->
          <div class="form-group row"
               *ngIf="nfsForm.getValue('name') === 'RGW'">
            <label class="cd-col-form-label required"
                   for="rgw_user_id"
                   i18n>Object Gateway User</label>
            <div class="cd-col-form-input">
              <select class="form-control custom-select"
                      formControlName="rgw_user_id"
                      name="rgw_user_id"
                      id="rgw_user_id"
                      (change)="rgwUserIdChangeHandler()">
                <option *ngIf="allRgwUsers === null"
                        value=""
                        i18n>Loading...</option>
                <option *ngIf="allRgwUsers !== null && allRgwUsers.length === 0"
                        value=""
                        i18n>-- No users available --</option>
                <option *ngIf="allRgwUsers !== null && allRgwUsers.length > 0"
                        value=""
                        i18n>-- Select the object gateway user --</option>
                <option *ngFor="let rgwUserId of allRgwUsers"
                        [value]="rgwUserId">{{ rgwUserId }}</option>
              </select>
              <span class="invalid-feedback"
                    *ngIf="nfsForm.showError('rgw_user_id', formDir, 'required')"
                    i18n>Required field</span>
            </div>
          </div>

          <!-- CephFS user_id -->
          <div class="form-group row"
               *ngIf="nfsForm.getValue('name') === 'CEPH'">
            <label class="cd-col-form-label required"
                   for="user_id"
                   i18n>CephFS User ID</label>
            <div class="cd-col-form-input">
              <select class="form-control custom-select"
                      formControlName="user_id"
                      name="user_id"
                      id="user_id">
                <option *ngIf="allCephxClients === null"
                        value=""
                        i18n>Loading...</option>
                <option *ngIf="allCephxClients !== null && allCephxClients.length === 0"
                        value=""
                        i18n>-- No clients available --</option>
                <option *ngIf="allCephxClients !== null && allCephxClients.length > 0"
                        value=""
                        i18n>-- Select the cephx client --</option>
                <option *ngFor="let client of allCephxClients"
                        [value]="client">{{ client }}</option>
              </select>
              <span class="invalid-feedback"
                    *ngIf="nfsForm.showError('user_id', formDir, 'required')"
                    i18n>Required field</span>
            </div>
          </div>

          <!-- CephFS fs_name -->
          <div class="form-group row"
               *ngIf="nfsForm.getValue('name') === 'CEPH'">
            <label class="cd-col-form-label required"
                   for="fs_name"
                   i18n>CephFS Name</label>
            <div class="cd-col-form-input">
              <select class="form-control custom-select"
                      formControlName="fs_name"
                      name="fs_name"
                      id="fs_name"
                      (change)="rgwUserIdChangeHandler()">
                <option *ngIf="allFsNames === null"
                        value=""
                        i18n>Loading...</option>
                <option *ngIf="allFsNames !== null && allFsNames.length === 0"
                        value=""
                        i18n>-- No CephFS filesystem available --</option>
                <option *ngIf="allFsNames !== null && allFsNames.length > 0"
                        value=""
                        i18n>-- Select the CephFS filesystem --</option>
                <option *ngFor="let filesystem of allFsNames"
                        [value]="filesystem.name">{{ filesystem.name }}</option>
              </select>
              <span class="invalid-feedback"
                    *ngIf="nfsForm.showError('fs_name', formDir, 'required')"
                    i18n>Required field</span>
            </div>
          </div>
        </div>

        <!-- Secutiry Label -->
        <div class="form-group row"
             *ngIf="nfsForm.getValue('name') === 'CEPH'">
          <label class="cd-col-form-label"
                 [ngClass]="{'required': nfsForm.getValue('security_label')}"
                 for="security_label"
                 i18n>Security Label</label>

          <div class="cd-col-form-input">
            <div class="custom-control custom-checkbox">
              <input type="checkbox"
                     class="custom-control-input"
                     formControlName="security_label"
                     name="security_label"
                     id="security_label">
              <label for="security_label"
                     class="custom-control-label"
                     i18n>Enable security label</label>
            </div>

            <br>

            <input type="text"
                   *ngIf="nfsForm.getValue('security_label')"
                   class="form-control"
                   name="sec_label_xattr"
                   id="sec_label_xattr"
                   formControlName="sec_label_xattr">

            <span class="invalid-feedback"
                  *ngIf="nfsForm.showError('sec_label_xattr', formDir, 'required')"
                  i18n>Required field</span>
          </div>
        </div>

        <!-- Path -->
        <div class="form-group row"
             *ngIf="nfsForm.getValue('name') === 'CEPH'">
          <label class="cd-col-form-label required"
                 for="path"
                 i18n>CephFS Path</label>
          <div class="cd-col-form-input">
            <input type="text"
                   class="form-control"
                   name="path"
                   id="path"
                   formControlName="path"
                   [typeahead]="pathDataSource"
                   (typeaheadOnSelect)="pathChangeHandler()"
                   (blur)="pathChangeHandler()">
            <span class="invalid-feedback"
                  *ngIf="nfsForm.showError('path', formDir, 'required')"
                  i18n>Required field</span>

            <span class="invalid-feedback"
                  *ngIf="nfsForm.showError('path', formDir, 'pattern')"
                  i18n>Path need to start with a '/' and can be followed by a word</span>
            <span class="form-text text-muted"
                  *ngIf="isNewDirectory && !nfsForm.showError('path', formDir)"
                  i18n>New directory will be created</span>
          </div>
        </div>

        <!-- Bucket -->
        <div class="form-group row"
             *ngIf="nfsForm.getValue('name') === 'RGW'">
          <label class="cd-col-form-label required"
                 for="path"
                 i18n>Path</label>
          <div class="cd-col-form-input">
            <input type="text"
                   class="form-control"
                   name="path"
                   id="path"
                   formControlName="path"
                   [typeahead]="bucketDataSource"
                   (typeaheadOnSelect)="bucketChangeHandler()"
                   (blur)="bucketChangeHandler()">

            <span class="invalid-feedback"
                  *ngIf="nfsForm.showError('path', formDir, 'required')"
                  i18n>Required field</span>

            <span class="invalid-feedback"
                  *ngIf="nfsForm.showError('path', formDir, 'pattern')"
                  i18n>Path can only be a single '/' or a word</span>

            <span class="form-text text-muted"
                  *ngIf="isNewBucket && !nfsForm.showError('path', formDir)"
                  i18n>New bucket will be created</span>
          </div>
        </div>

        <!-- NFS Protocol -->
        <div class="form-group row">
          <label class="cd-col-form-label required"
                 for="protocols"
                 i18n>NFS Protocol</label>
          <div class="cd-col-form-input">
            <div class="custom-control custom-checkbox">
              <input type="checkbox"
                     class="custom-control-input"
                     id="protocolNfsv3"
                     name="protocolNfsv3"
                     formControlName="protocolNfsv3">
              <label i18n
                     class="custom-control-label"
                     for="protocolNfsv3">NFSv3</label>
            </div>
            <div class="custom-control custom-checkbox">
              <input type="checkbox"
                     class="custom-control-input"
                     formControlName="protocolNfsv4"
                     name="protocolNfsv4"
                     id="protocolNfsv4">
              <label i18n
                     class="custom-control-label"
                     for="protocolNfsv4">NFSv4</label>
            </div>
            <span class="invalid-feedback"
                  *ngIf="nfsForm.showError('protocolNfsv3', formDir, 'required') ||
                  nfsForm.showError('protocolNfsv4', formDir, 'required')"
                  i18n>Required field</span>
          </div>
        </div>

        <!-- Tag -->
        <div class="form-group row"
             *ngIf="nfsForm.getValue('protocolNfsv3')">
          <label class="cd-col-form-label"
                 for="tag">
            <ng-container i18n>NFS Tag</ng-container>
            <cd-helper>
              <p i18n>Alternative access for <strong>NFS v3</strong> mounts (it must not have a leading /).</p>
              <p i18n>Clients may not mount subdirectories (i.e. if Tag = foo, the client may not mount foo/baz).</p>
              <p i18n>By using different Tag options, the same Path may be exported multiple times.</p>
            </cd-helper>
          </label>
          <div class="cd-col-form-input">
            <input type="text"
                   class="form-control"
                   name="tag"
                   id="tag"
                   formControlName="tag">
          </div>
        </div>

        <!-- Pseudo -->
        <div class="form-group row"
             *ngIf="nfsForm.getValue('protocolNfsv4')">
          <label class="cd-col-form-label"
                 for="pseudo">
            <span class="required"
                  i18n>Pseudo</span>
            <cd-helper>
              <p i18n>The position that this <strong>NFS v4</strong> export occupies
                in the <strong>Pseudo FS</strong> (it must be unique).</p>
              <p i18n>By using different Pseudo options, the same Path may be exported multiple times.</p>
            </cd-helper>
          </label>
          <div class="cd-col-form-input">
            <input type="text"
                   class="form-control"
                   name="pseudo"
                   id="pseudo"
                   formControlName="pseudo">
            <span class="invalid-feedback"
                  *ngIf="nfsForm.showError('pseudo', formDir, 'required')"
                  i18n>Required field</span>
            <span class="invalid-feedback"
                  *ngIf="nfsForm.showError('pseudo', formDir, 'pattern')"
                  i18n>Pseudo needs to start with a '/' and can't contain any of the following: &gt;, &lt;, |, &, ( or ).</span>
          </div>
        </div>

        <!-- Access Type -->
        <div class="form-group row">
          <label class="cd-col-form-label required"
                 for="access_type"
                 i18n>Access Type</label>
          <div class="cd-col-form-input">
            <select class="form-control custom-select"
                    formControlName="access_type"
                    name="access_type"
                    id="access_type"
                    (change)="accessTypeChangeHandler()">
              <option *ngIf="nfsAccessType === null"
                      value=""
                      i18n>Loading...</option>
              <option *ngIf="nfsAccessType !== null && nfsAccessType.length === 0"
                      value=""
                      i18n>-- No access type available --</option>
              <option *ngIf="nfsAccessType !== null && nfsAccessType.length > 0"
                      value=""
                      i18n>-- Select the access type --</option>
              <option *ngFor="let accessType of nfsAccessType"
                      [value]="accessType.value">{{ accessType.value }}</option>
            </select>
            <span class="form-text text-muted"
                  *ngIf="nfsForm.getValue('access_type')">
              {{ getAccessTypeHelp(nfsForm.getValue('access_type')) }}
            </span>
            <span class="form-text text-warning"
                  *ngIf="nfsForm.getValue('access_type') === 'RW' && nfsForm.getValue('name') === 'RGW'"
                  i18n>The Object Gateway NFS backend has a number of
              limitations which will seriously affect applications writing to
              the share. Please consult the
              <a href="{{docsUrl}}"
                 target="_blank"> documentation</a> for details before enabling write access.</span>
            <span class="invalid-feedback"
                  *ngIf="nfsForm.showError('access_type', formDir, 'required')"
                  i18n>Required field</span>
          </div>
        </div>

        <!-- Squash -->
        <div class="form-group row">
          <label class="cd-col-form-label required"
                 for="squash"
                 i18n>Squash</label>
          <div class="cd-col-form-input">
            <select class="form-control custom-select"
                    name="squash"
                    formControlName="squash"
                    id="squash">
              <option *ngIf="nfsSquash === null"
                      value=""
                      i18n>Loading...</option>
              <option *ngIf="nfsSquash !== null && nfsSquash.length === 0"
                      value=""
                      i18n>-- No squash available --</option>
              <option *ngIf="nfsSquash !== null && nfsSquash.length > 0"
                      value=""
                      i18n>--Select what kind of user id squashing is performed --</option>
              <option *ngFor="let squash of nfsSquash"
                      [value]="squash">{{ squash }}</option>

            </select>
            <span class="invalid-feedback"
                  *ngIf="nfsForm.showError('squash', formDir,'required')"
                  i18n>Required field</span>
          </div>
        </div>

        <!-- Transport Protocol -->
        <div class="form-group row">
          <label class="cd-col-form-label required"
                 for="transports"
                 i18n>Transport Protocol</label>
          <div class="cd-col-form-input">
            <div class="custom-control custom-checkbox">
              <input type="checkbox"
                     class="custom-control-input"
                     formControlName="transportUDP"
                     name="transportUDP"
                     id="transportUDP">
              <label for="transportUDP"
                     class="custom-control-label"
                     i18n>UDP</label>
            </div>
            <div class="custom-control custom-checkbox">
              <input type="checkbox"
                     class="custom-control-input"
                     formControlName="transportTCP"
                     name="transportTCP"
                     id="transportTCP">
              <label for="transportTCP"
                     class="custom-control-label"
                     i18n>TCP</label>
            </div>
            <span class="invalid-feedback"
                  *ngIf="nfsForm.showError('transportUDP', formDir, 'required') ||
                  nfsForm.showError('transportTCP', formDir, 'required')"
                  i18n>Required field</span>
            <hr>
          </div>
        </div>

        <!-- Clients -->
        <cd-nfs-form-client [form]="nfsForm"
                            #nfsClients>
        </cd-nfs-form-client>

      </div>

      <div class="card-footer">
        <div class="button-group text-right">
          <cd-submit-button
            (submitAction)="submitAction()"
            i18n="form action button|Example: Create Pool@@formActionButton"
            [form]="formDir">{{ action | titlecase }} {{ resource | upperFirst }}</cd-submit-button>
          <cd-back-button></cd-back-button>
        </div>
      </div>
    </div>
  </form>
</div>
